<!-- 头部登录信息 -->
<template>
  <div class="user_info">
    <el-avatar :size="36" :src="userInfo.avatar" @error="errorHandler">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
    </el-avatar>
    <el-dropdown>
      <el-button class="user_name">
        {{ userInfo.username }}
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(item, index) in dropdowMenuItems" :key="index">
            <div v-if="item.isLine" class="line"></div>
            <el-dropdown-item @click="handleClick(item)">
              <!-- <el-icon :size="20">
                <component :is="item.icon"></component>
              </el-icon> -->
              <svg-icon :icon="item.icon"></svg-icon>
              {{ item.text }}
            </el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

</template>

<script lang="ts" setup>

import { computed, toRefs, ref } from 'vue'
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
import dropdowMenuItems, { IDropdownItemType } from "../config/avatar.cong"

import { LStorage } from "@/utils/storage"

import { setTheme } from '@/assets/theme/theme'

const store = useStore()
const router = useRouter()
const errorHandler = () => true
const userInfo = computed(() => store.state.login.userInfo)

const handleClick = (item: IDropdownItemType) => {
  if (item.url === '/loginOut') {
    LStorage.clear()
    store.commit('rest_statue')
    store.dispatch('clearAll')
    router.push('/login')
  } else {
    router.push(item.url ?? '#')
  }
  if (item.icon == 'color') {
   const theme = computed(() => store.state.defaultConfig.theme)
    if (theme.value == 'default') {
       setTheme('green')
      store.dispatch('defaultConfig/themeAction','green')
    }else{
        setTheme('default')
        store.dispatch('defaultConfig/themeAction','default')

    }
  }

}


</script>
<style scoped lang="less" >
.user_info {
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_name {
  color: #fff;
}

.line {
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  height: 1px;
  background: #ccc;

}

::v-deep .el-button {
  background: transparent;
  border: none;
  width: 60px;
  font-weight: 900;
}

::v-deep .el-dropdown-menu__item {
  display: flex;
  justify-content: center;
  align-items: center;

}
</style>
